<template>
	<view  v-if="catalogList.length>0">
		<view v-for="(item,index) in catalogList" :key='index'>
			<pulldown 
			:title="item.title" 
			:openIndex="openIndex" 
			:selfIndex="index" 
			@updateOpenIndex="updateOpenIndex">
				<view style="overflow: hidden;">
					<view class="collapse-content" :class="[openIndex==index?'open':'unopen',secondIndex == item.children.length - 1 ? 'last-box' : '']" v-for="(secondItem,secondIndex) in item.children"
					 :key='secondIndex'>
					 <catalog-sub v-if="secondItem.indexType=='0'"
					 :secondItem="secondItem" :secondIndex="secondIndex"></catalog-sub>
						<catalog-item v-if="secondItem.indexType=='1'" :item="secondItem" :isFirst="secondIndex==0" :isLast="secondIndex==item.children.length-1">
						</catalog-item>

						<view v-if='secondItem.indexType=="2"' class="comment">
							<image class="icon-comment" src="/static/img/tabbar/mine.png"></image>
							<view>{{secondItem.title}}</view>
						</view>
					</view>
				</view>
			</pulldown>
			<!-- <view class="title" @click="toggle(index)">
				<view class="title-content">{{item.title}}</view>
				<image class="title-img" :class="openIndex==index?'title-img-rotate':''" src="/static/course/arrow-round.png"></image>
			</view> -->
		</view>
	</view>
	<view v-else class="empty">暂无数据</view>
</template>

<script>
	import pulldown from '@/pages/course/fragment/pulldown.vue'
	import catalogItem from './catalogItem.vue'
	import catalogSub from '@/pages/course/fragment/catalogSub.vue'
	export default {
		components: {
			pulldown,
			catalogItem,
			catalogSub
		},
		props: {
			catalogList: {
				type: Array,
				default () {
					return []
				}
			}
		},
		data() {
			return {
				openIndex: 0,
			}
		},
		methods: {
			updateOpenIndex(value) {
				this.openIndex = value
			}
		}
	}
</script>

<style lang="scss" scoped>
	.collapse-content {
		overflow: hidden;
		transition: all .3s;
		border-left: 1px solid #e4e4e4;
		margin-left: 12upx;
	}
	.collapse-content.last-box {
		border-left: 0;
		position: relative;
		&::before {
			content: "";
			position: absolute;
			width: 1px;
			height: 48upx;
			background-color: #e4e4e4;
			top: 0upx;
			left: 0;
		}
	}
	.title {
		padding-top: 40upx;
		font-size: 28upx;
		color: #333333;
		font-weight: bold;
		display: flex;
		line-height: 1;

		&-content {
			flex: 1;
		}

		&-img {
			width: 30upx;
			height: 30upx;
			transition: all 0.3s;
			margin-right: 12upx;

			&-rotate {
				transform: rotate(180deg);
			}
		}
	}
	.open {
		height: auto;
		transform: translateY(0);
	}

	.unopen {
		height: 0px;
		alpha: 1;
		transform: translateY(-50%);
	}

	.comment {
		margin-left: 60upx;
		font-size: 24upx;
		color: #333333;
		display: flex;
		align-items: center;
	}

	.icon-comment {
		width: 20upx;
		height: auto;
		margin-right: 4upx;
	}

	.empty {
		margin-top: 60upx;
		text-align: center;
		font-size: 28upx;
		color: #666666;
	}
</style>
